<template>
    <div class="createdApi">
      <div class="createdApiHeader">
        <span class="returnBtn" @click="returnFun"><i class="el-icon-back"></i> 返回API列表</span>
        <span style="display: inline-block;color:#d9d9d9;margin: 0 8px;vertical-align: middle;">|</span>
        <span class="returnBtn" @click="editForm" style="margin-left: 20px" v-if="(this.$store.state.user.memberType==='0'|this.$store.state.user.memberType==='-1')"><i class="el-icon-edit"></i> 编辑</span>
        <!--<span class="returnBtn" @click="returnFun" style="margin-left: 20px"><i class="el-icon-edit"></i> 复制</span>-->
        <span class="returnBtn" @click="deleteForm" style="margin-left: 20px" v-if="(this.$store.state.user.memberType==='0'|this.$store.state.user.memberType==='-1')"><i class="el-icon-delete"></i> 删除</span>
        <div style="float: right">
          <div style="float: left">
          <i class=" iconfont seeBtnEnv">&#xe666;</i>
          </div>
          <div style="float: left">
          <el-select v-model="value" placeholder="未设置环境" size="small">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          </div>
        </div>
      </div>
      <div class="createdApiContent">
        <el-tabs type="border-card">
          <el-tab-pane label="API">
            <apiDescribe></apiDescribe>
          </el-tab-pane>
          <!--<el-tab-pane label="测试">-->
            <!--<test></test>-->
          <!--</el-tab-pane>-->
          <!--<el-tab-pane label="测试用例">-->
            <!--<testCase></testCase>-->
          <!--</el-tab-pane>-->
          <!--<el-tab-pane label="Mock API">-->
            <!--<MockAPI></MockAPI>-->
          <!--</el-tab-pane>-->
        </el-tabs>
      </div>
    </div>
</template>

<script>
  import apiDescribe from './editApicontnet/editapiDescribe'
  import test from './editApicontnet/editapiDescribe'
  import testCase from './editApicontnet/editapiDescribe'
  import MockAPI from './editApicontnet/editapiDescribe'
  import { deleteAPIItem } from '@/api/apiModel/api.js'
  export default {
    data() {
      return {
        value: '',
        options: []
      }
    },
    name: 'editApiPage',
    components: {
      apiDescribe,
      test,
      testCase,
      MockAPI
    },
    methods: {
      handleClickAddAPI() {

      },
      editForm(id) {
        this.$router.push({
          name: 'editApiEditPage',
          query: {
            id: this.$route.query.id,
            projectId: this.$store.state.user.projectId
          }
        })
      },
      deleteForm() {
        this.$confirm('确认要把API移入回收站吗？您可以稍后在API回收站恢复相关API。', '删除', { type: 'warning' }).then(() => {
          this.deleteAffirm()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      deleteAffirm() {
        deleteAPIItem(this.$route.query.id).then(res => {
          this.$router.push({
            name: 'apiManage',
            query: { projectId: this.$store.state.user.projectId }
          })
          this.$message({
            message: '删除成功,已移除到回收站中',
            type: 'success'
          })
        })
      },
      handleCommandAdd() {

      },
      returnFun() {
        this.$router.push({
          name: 'projectApi',
          query: { projectId: this.$store.state.user.projectId }
        })
      }
    }
  }
</script>

<style scoped>
  .returnBtn:hover{
    color: #409EFF;
  }
</style>
